<template>
    <div class="fillcontain">
        <head-top></head-top>
        <div class="table_container">
            <el-table :data="tableData" highlight-current-row style="width: 100%" @row-click="selectRow">
                <el-table-column
                  type="index"
                  width="100">
                </el-table-column>
                <el-table-column
                  property="name"
                  label="项目名称"
                  width="220">
                </el-table-column>
                <el-table-column
                  property="time"
                  label="项目时间"
                  width="220">
                </el-table-column>
                <el-table-column
                  property="people"
                  label="项目负责人">
                </el-table-column>
                <el-table-column
                    property="info"
                    label="项目描述">
                </el-table-column>
            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-size="20"
                  layout="total, prev, pager, next"
                  :total="count">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import headTop from '../components/headTop'
    import {getUserList, getUserCount} from '@/api/getData'
    export default {
        data(){
            return {
                tableData: [{
                    name:"东坝基坑监测",
                    time:"2019-01-02",
                    people:"张三",
                    info:"沉降水平测斜轴力",
                },{
                    name:"东坝基坑监测",
                    time:"2019-01-02",
                    people:"张三",
                    info:"沉降水平测斜轴力",
                },{
                    name:"东坝基坑监测",
                    time:"2019-01-02",
                    people:"张三",
                    info:"沉降水平测斜轴力",
                },{
                    name:"东坝基坑监测",
                    time:"2019-01-02",
                    people:"张三",
                    info:"沉降水平测斜轴力",
                },{
                    name:"东坝基坑监测",
                    time:"2019-01-02",
                    people:"张三",
                    info:"沉降水平测斜轴力",
                },{
                    name:"东坝基坑监测",
                    time:"2019-01-02",
                    people:"张三",
                    info:"沉降水平测斜轴力",
                },{
                    name:"东坝基坑监测",
                    time:"2019-01-02",
                    people:"张三",
                    info:"沉降水平测斜轴力",
                },{
                    name:"东坝基坑监测",
                    time:"2019-01-02",
                    people:"张三",
                    info:"沉降水平测斜轴力",
                },{
                    name:"东坝基坑监测",
                    time:"2019-01-02",
                    people:"张三",
                    info:"沉降水平测斜轴力",
                },{
                    name:"东坝基坑监测",
                    time:"2019-01-02",
                    people:"张三",
                    info:"沉降水平测斜轴力",
                },{
                    name:"东坝基坑监测",
                    time:"2019-01-02",
                    people:"张三",
                    info:"沉降水平测斜轴力",
                },{
                    name:"东坝基坑监测",
                    time:"2019-01-02",
                    people:"张三",
                    info:"沉降水平测斜轴力",
                }],
                currentRow: null,
                offset: 0,
                limit: 20,
                count: 0,
                currentPage: 1,
            }
        },
    	components: {
    		headTop,
    	},
        created(){
            //this.initData();
        },
        methods: {
            async initData(){
                try{
                    const countData = await getUserCount();
                    if (countData.status == 1) {
                        this.count = countData.count;
                    }else{
                        throw new Error('获取数据失败');
                    }
                    this.getUsers();
                }catch(err){
                    console.log('获取数据失败', err);
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.offset = (val - 1)*this.limit;
                this.getUsers()
            },
            async getUsers(){
                const Users = await getUserList({offset: this.offset, limit: this.limit});
                this.tableData = [];
                Users.forEach(item => {
                    const tableData = {};
                    tableData.username = item.username;
                    tableData.registe_time = item.registe_time;
                    tableData.city = item.city;
                    this.tableData.push(tableData);
                })
            },
            selectRow(row, event, column){

                this.$store.commit('changeprojectID',22);
                this.$router.push("/project/"+row.name+"/info");
                //alert(row+"-"+event+"-"+column )
            }
        },
    }
</script>

<style lang="less">
	@import '../style/mixin';
    .table_container{
        padding: 20px;
    }
</style>
